<template>
  <PageLayout full :page-style="pageStyle">
    <!--头部导航-->
    <template #header>
      <HeaderLayout show-back>
        <view>账号管理</view>
      </HeaderLayout>
    </template>
    <!--内容-->
    <view class="container">
      <!--手机号-->
      <view class="head-cell">
        <view class="set-name">手机号</view>
        <view class="set-text">{{ accountNumber }}</view>
      </view>
      <!--分割线-->
      <view class="line"></view>
      <!--注销账号-->
      <view class="head-cell" @click="delentBut">
        <view class="set-name">注销账号</view>
        <image class="arrow-right" :src="'/static/ic_right_arrow.png'"></image>
      </view>
    </view>

    <!-- 账号注销弹窗 -->
    <Modal
      :title="$t('GetUserProfile.DeleteCancellation.Text')"
      :visible="deletPop"
      :cancel-text="$t('APP.Common.Confirm.Text')"
      :ok-text="$t('APP.Common.Cancel.Text')"
      @ok="cancelDeletPop"
      @cancel="confirmDeletPop"
    >
      <view class="updateView"> {{ $t('DeleteAccount.DeleteTipsDes.Text') }} </view>
    </Modal>
  </PageLayout>
</template>

<script setup lang="ts">
import PageLayout from '@/layout/page/page.vue'
import HeaderLayout from '@/layout/page/header.vue'
import { onLoad } from '@dcloudio/uni-app'
import { useAuthStore } from '@/store/auth'
import { useI18n } from 'vue-i18n'
import { delentAccount } from '@/api/account'
import Modal from '@/common/modal.vue'
import aesHelper from '@/utils/aesHelper'
import { toHome, vibrate } from '@/utils/mpHelper'
import { actionDebounce } from '@/utils/mpHelper'
import { trackEvent, TrackType } from '@/dataReport/tracks'
import { safeTrack } from '@/dataReport/dataReportUtil'

const authStore = useAuthStore()
const i18n = useI18n()

const pageStyle = {
  backgroundColor: '#F4F4F4',
}

const deletPop = ref(false)
const accountNumber = ref('')

onLoad(() => {
  getAccountNumber()
})

/**
 * 获取手机号
 */
function getAccountNumber() {
  var phoneNumber = ''
  try {
    let key = uni.getStorageSync('cache_key')
    let iv = uni.getStorageSync('cache_iv')
    phoneNumber = aesHelper.decrypt(uni.getStorageSync('ciamId'), key, iv)
    if (phoneNumber) {
      accountNumber.value = phoneNumber.replace('+86', '')
    }
  } catch (error) {}
}

function delentBut() {
  deletPop.value = true
}

/**
 * 取消注销账号
 */
function cancelDeletPop() {
  deletPop.value = false
}

/**
 * 确认注销账号
 */
const confirmDeletPop = actionDebounce({
  delay: 300,
  showLoading: true,
  call: async () => {
    vibrate()
    let res: any = null
    try {
      res = await delentAccount()
    } catch (error) {
      res = error
    } finally {
      safeTrack(() => {
        trackEvent(
          'delete_account',
          {
            successOrNot: res.code == 0,
            error_code: res.code,
            response_msg: res.msg,
          },
          TrackType.BusinesssScene,
          'My.AccountManager.DeleteCount.Dialog.Sure'
        )
      })
    }
  },

  then: async (res) => {
    authStore.removeAllUserInfo()
    uni.removeStorageSync('userProfile')
    uni.showToast({
      title: i18n.t('APP.Common.DeleteSucess.Text'),
    })
    await toHome({ current: 2 })
  },
  catch: (error) => {
    uni.showToast({
      title: i18n.t('APP.Common.DeleteFail.Text'),
    })
  },
  finally: () => {
    deletPop.value = false
  },
})
</script>

<style lang="less">
// 设置
.container {
  margin-top: 16rpx;
  .head-cell {
    background-color: #fff;
    padding: 0 32rpx;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  // 分割线
  .line {
    height: 1rpx;
    background-color: #e2e2e2;
    margin: 0rpx 32rpx;
  }
}
// 箭头
.arrow-right {
  width: 16rpx;
  height: 28rpx;
}

.set-name {
  font-weight: 500;
  font-size: 32rpx;
  color: var(--dark-color);
  opacity: 0.9;
}

.set-text {
  font-weight: 400;
  font-size: 32rpx;
  color: var(--dark-color);
  opacity: 0.6;
}

.updateView {
  font-weight: 400;
  font-size: 32rpx;
  line-height: 48rpx;
  color: var(--dark-color);
  opacity: 0.8;
}
</style>
